<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>审核报工</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="__CDN__/assets/css/backend{$Think.config.app_debug?'':'.min'}.css?v={$Think.config.site.version}">
    <script src="__CDN__/assets/js/jquery.min.js"></script>
    <script src="__CDN__/assets/libs/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="__CDN__/assets/libs/fastadmin-layer/dist/layer.js"></script>
    <script src="__CDN__/assets/libs/toastr/toastr.js"></script>
    <script src="__CDN__/assets/js/dropzone.min.js"></script>
</head>
<body>
    <div class="container-fluid">
        <form id="audit-form" class="form-horizontal" role="form" method="POST" action="">
            <div class="form-group">
                <label class="control-label col-xs-12 col-sm-2">审核状态:</label>
                <div class="col-xs-12 col-sm-8">
                    <select name="status" class="form-control" required>
                        <option value="1" {if $status == 1}selected{/if}>通过</option>
                        <option value="2" {if $status == 2}selected{/if}>拒绝</option>
                    </select>
                </div>
            </div>
            
            <div class="form-group">
                <label class="control-label col-xs-12 col-sm-2">审核原因:</label>
                <div class="col-xs-12 col-sm-8">
                    <textarea name="audit_reason" class="form-control" rows="3" placeholder="请输入审核原因"></textarea>
                </div>
            </div>
            
            <!-- 产品编号审核区域 -->
            {volist name="reports" id="report"}
              {if condition="$report.item_nos"}
                <div class="form-group">
                  <label class="control-label col-xs-12 col-sm-2">产品编号审核:</label>
                  <div class="col-xs-12 col-sm-8">
                    <div class="alert alert-info">
                      <strong>报工ID: {$report.id}</strong> - 计件工作，需要按产品编号分别审核
                    </div>
                    
                    {php}
                      $itemNos = json_decode($report['item_nos'], true);
                      if (!$itemNos) $itemNos = [];
                    {/php}
                    
                    {volist name="itemNos" id="itemNo"}
                      <div class="item-audit-section" style="border: 1px solid #ddd; padding: 10px; margin-bottom: 10px; border-radius: 5px;">
                        <h6>产品编号: {$itemNo}</h6>
                        
                        <!-- 显示该产品编号的报工图片 -->
                        <div class="report-images" style="margin-bottom: 8px;">
                          <small><strong>报工图片:</strong></small>
                          {php}
                            $itemImages = \think\Db::name('scanwork_item_report_image')
                                ->alias('iri')
                                ->join('scanwork_product_item pi', 'iri.item_id = pi.id')
                                ->where('iri.report_id', $report['id'])
                                ->where('pi.item_no', $itemNo)
                                ->select();
                          {/php}
                          {volist name="itemImages" id="img"}
                            <div style="display: inline-block; margin: 2px;">
                              <a href="{$img.image_url}" target="_blank">
                                <img src="{$img.image_url}" style="width:60px;height:60px;object-fit:cover;border-radius:3px;">
                              </a>
                            </div>
                          {/volist}
                        </div>
                        
                        <!-- 审核图片上传 -->
                        <div class="audit-images">
                          <small><strong>审核图片:</strong></small>
                          <div class="form-group" style="margin-bottom: 5px;">
                            <div class="col-xs-12">
                              <input type="file" name="item_audit_files[{$report.id}][{$itemNo}][]" multiple accept="image/*" class="form-control" style="margin-bottom: 5px;">
                              <small class="help-block">可以选择多张图片，最多9张，单张≤10M</small>
                              <div id="preview-audit-{$report.id}-{$itemNo}" class="mt-2" style="display:flex;flex-wrap:wrap;gap:5px;min-height:50px;border:1px dashed #ccc;border-radius:5px;padding:10px;background:#f9f9f9;"></div>
                            </div>
                          </div>
                        </div>
                        
                        <!-- 审核视频上传 -->
                        <div class="audit-videos">
                          <small><strong>审核视频:</strong></small>
                          <div class="form-group" style="margin-bottom: 5px;">
                            <div class="col-xs-12">
                              <input type="file" name="item_audit_videos[{$report.id}][{$itemNo}][]" multiple accept="video/*" class="form-control" style="margin-bottom: 5px;">
                              <small class="help-block">可以选择多个视频文件，支持MP4、AVI、MOV、WMV、FLV、3GP、WEBM格式，单个文件≤100MB</small>
                              <div id="preview-audit-video-{$report.id}-{$itemNo}" class="mt-2" style="display:flex;flex-wrap:wrap;gap:5px;min-height:50px;border:1px dashed #ccc;border-radius:5px;padding:10px;background:#f9f9f9;"></div>
                            </div>
                          </div>
                        </div>
                      </div>
                    {/volist}
                  </div>
                </div>
              {else}
                <!-- 计时工作的普通审核图片上传 -->
                <div class="form-group">
                  <label class="control-label col-xs-12 col-sm-2">审核图片:</label>
                  <div class="col-xs-12 col-sm-8">
                    <input type="file" name="audit_images[]" multiple accept="image/*" class="form-control">
                    <small class="help-block">可以选择多张图片</small>
                  </div>
                </div>
                
                <!-- 计时工作的普通审核视频上传 -->
                <div class="form-group">
                  <label class="control-label col-xs-12 col-sm-2">审核视频:</label>
                  <div class="col-xs-12 col-sm-8">
                    <input type="file" name="audit_videos[]" multiple accept="video/*" class="form-control">
                    <small class="help-block">可以选择多个视频文件，支持MP4、AVI、MOV、WMV、FLV、3GP、WEBM格式，单个文件≤100MB</small>
                  </div>
                </div>
              {/if}
            {/volist}
            
            <div class="form-group" style="margin-top: 20px; text-align: center;">
                <div class="col-xs-12">
                    <button type="submit" class="btn btn-success btn-lg" style="margin-right: 10px;">确定提交</button>
                    <button type="reset" class="btn btn-default btn-lg">重置</button>
                </div>
            </div>
        </form>
    </div>
    
    <!-- 图片放大查看模态框 -->
    <div id="imageModal" style="display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.8);z-index:9999;cursor:pointer;" onclick="closeImageModal()">
        <div style="position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;">
            <img id="modalImage" style="max-width:90%;max-height:90%;border-radius:5px;box-shadow:0 0 20px rgba(0,0,0,0.5);" onclick="event.stopPropagation();">
            <div id="modalImageName" style="color:white;margin-top:10px;font-size:16px;"></div>
        </div>
    </div>
    
    <script>
        // 显示图片模态框
        function showImageModal(imageSrc, fileName) {
            document.getElementById('modalImage').src = imageSrc;
            document.getElementById('modalImageName').textContent = fileName;
            document.getElementById('imageModal').style.display = 'block';
        }
        
        // 关闭图片模态框
        function closeImageModal() {
            document.getElementById('imageModal').style.display = 'none';
        }
        
        // ESC键关闭模态框
        document.addEventListener('keydown', function(e) {
            if (e.key === 'Escape') {
                closeImageModal();
            }
        });
        $(function() {
            console.log('弹窗审核页面JavaScript已加载');
            
            // 初始化文件预览功能
            $('input[type="file"]').on('change', function() {
                console.log('弹窗文件选择改变');
                
                var $this = $(this);
                var files = this.files;
                console.log('弹窗选择的文件数量:', files.length);
                
                // 处理图片文件预览
                if ($this.attr('accept') && $this.attr('accept').includes('image/*')) {
                    var $auditImages = $this.closest('.audit-images');
                    var $preview = $auditImages.find('[id^="preview-audit-"]');
                    
                    console.log('弹窗找到图片预览容器:', $preview.length, $preview.attr('id'));
                    
                    if ($preview.length > 0) {
                        $preview.empty();
                        
                        for (var i = 0; i < files.length && i < 9; i++) {
                            var file = files[i];
                            console.log('弹窗处理图片文件:', file.name, file.type);
                            
                            if (file.type.startsWith('image/')) {
                                var reader = new FileReader();
                                reader.onload = (function(file) {
                                    return function(e) {
                                        console.log('弹窗图片预览加载完成:', file.name);
                                        $preview.append('<div style="display:inline-block;margin:5px;position:relative;border:2px solid #ddd;border-radius:5px;padding:2px;"><img src="' + e.target.result + '" style="width:120px;height:120px;object-fit:cover;border-radius:3px;cursor:pointer;" title="点击放大查看 - ' + file.name + '" onclick="showImageModal(\'' + e.target.result + '\', \'' + file.name + '\')"></div>');
                                    };
                                })(file);
                                reader.readAsDataURL(file);
                            }
                        }
                    }
                }
                
                // 处理视频文件预览
                if ($this.attr('accept') && $this.attr('accept').includes('video/*')) {
                    var $auditVideos = $this.closest('.audit-videos');
                    var $preview = $auditVideos.find('[id^="preview-audit-video-"]');
                    
                    console.log('弹窗找到视频预览容器:', $preview.length, $preview.attr('id'));
                    
                    if ($preview.length > 0) {
                        $preview.empty();
                        
                        for (var i = 0; i < files.length; i++) {
                            var file = files[i];
                            console.log('弹窗处理视频文件:', file.name, file.type);
                            
                            if (file.type.startsWith('video/')) {
                                var reader = new FileReader();
                                reader.onload = (function(file) {
                                    return function(e) {
                                        console.log('弹窗视频预览加载完成:', file.name);
                                        var videoElement = '<video controls style="width:200px;height:150px;border-radius:3px;cursor:pointer;" title="' + file.name + '"><source src="' + e.target.result + '" type="' + file.type + '">您的浏览器不支持视频播放。</video>';
                                        $preview.append('<div style="display:inline-block;margin:5px;position:relative;border:2px solid #ddd;border-radius:5px;padding:2px;">' + videoElement + '<div style="font-size:12px;text-align:center;margin-top:5px;color:#666;">' + file.name + '</div></div>');
                                    };
                                })(file);
                                reader.readAsDataURL(file);
                            }
                        }
                    }
                }
            });
            
            // 表单提交处理
            $('#audit-form').on('submit', function(e) {
                e.preventDefault();
                
                var formData = new FormData(this);
                var ids = '{$ids}';
                formData.append('ids', ids);
                
                // 调试信息
                console.log('提交的文件:', $('input[type="file"]').length);
                $('input[type="file"]').each(function() {
                    console.log('文件输入:', $(this).attr('name'), '文件数量:', this.files.length);
                });
                
                $.ajax({
                    url: '{:url("audit")}',
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    dataType: 'json',
                    success: function(ret) {
                        if (ret.code === 1) {
                            // 成功
                            alert(ret.msg || '操作成功');
                            
                            // 尝试关闭弹窗
                            try {
                                if (typeof parent !== 'undefined' && parent.Layer) {
                                    var index = parent.Layer.getFrameIndex(window.name);
                                    if (index) {
                                        parent.Layer.close(index);
                                    }
                                }
                            } catch (e) {
                                console.log('关闭弹窗失败:', e);
                            }
                            
                            // 尝试刷新父页面表格
                            try {
                                if (typeof parent !== 'undefined' && parent.$ && parent.$('#table').length) {
                                    parent.$('#table').bootstrapTable('refresh');
                                }
                            } catch (e) {
                                console.log('刷新表格失败:', e);
                            }
                            
                        } else {
                            // 失败
                            alert(ret.msg || '操作失败');
                        }
                    },
                    error: function(xhr, status, error) {
                        console.log('AJAX错误:', status, error);
                        alert('操作失败: ' + error);
                    }
                });
            });
        });
        

    </script>
</body>
</html> 